import { View, Text,StyleSheet, TextInput,Image,Pressable, TouchableOpacity,Alert} from 'react-native'
import React,{useState} from 'react'
import api from '../config'
let ss=StyleSheet.create({
  container:{
    paddingVertical:80,
    paddingHorizontal:35
  },
  inputGroup:{
    flexDirection:'row',
    alignItems:'center',
    borderBottomColor:'#888',
    borderBottomWidth:1,
    marginBottom:25
  },
  input:{
    flex:1,
    fontSize:16,
  },
  icon:{
    marginRight:6
  },
  btn:{
    backgroundColor:'#0aa1ed',
    color:'#fff',
    textAlign:'center',
    fontSize:16,
    paddingVertical:10,
    borderRadius:5,
    marginTop:25,
    marginVertical:60
  },
  f4:{
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'space-around',
    marginBottom:30
  },
  title:{
    fontSize:25,
    color:'#aaa',
    
  }

  })
export default function AdminLogin({navigation}) {
  let [showIcon,setShowIcon]=useState(true)
  let [aname,setaname]=useState('admin')
  let [apwd,setapwd]=useState('123456')
  function doLogin() {
      // console.log(aname);
      // console.log(apwd);
      let url=api.adminLogin

      // get请求

      // console.log(url);
    //   url+=`?aname=${aname}&apwd=${apwd}`
    //   fetch(url).then(res=>{
    //     // console.log('请求成功',res);
    //     // res.json().then(data=>{
    //     //   console.log(data);
    //     // })
    //     return res.json()
    //   }).then(data=>{
    //     console.log(data);
    //   })
    //   .catch(err=>{
    //     console.log('请求失败',err);
    //   })


    // post请求
    let options={
      method:'post',
      headers:{'Content-Type':'application/x-www-form-urlencoded'},
      body:`aname=${aname}&apwd=${apwd}`
    }
    fetch(url,options)
    .then(res=>{
      return res.json()
    })
    .then(data=>{
      // console.log(data);
      if(data.code===200){
        Alert.alert(
          "登陆成功",
          "欢迎回来"+aname,
          [{
            text:'进入主菜单',
            onPress: ()=>navigation.navigate('menu')
          }]
        )
      }else{
        Alert.alert(
         "登陆失败",
          [{text: "确定"}]
        );
        // console.log('登陆失败',data.msg);
      }
    })
    .catch(err=>{
      console.log('请求失败',err);
    })
    }
  return (
    <View style={ss.container}>
      {/* f1:用户名输入框组 */}
      <View style={ss.inputGroup}>
        <TextInput value={aname} onChangeText={(v)=>{setaname(v)}} style={ss.input} placeholder='请输入管理员名字'/>
        <Image style={ss.icon} source={require('../assets/img/user.png')}/>
      </View>

      {/* f2:密码输入框组 */}
      <View style={ss.inputGroup}>
        <TextInput value={apwd} secureTextEntry={showIcon} onChangeText={(v)=>{setapwd(v)}} style={ss.input} placeholder='请输入密码'/>
          <Pressable onPress={()=>setShowIcon(!showIcon)}>
            {
            showIcon
            ?<Image style={ss.icon} source={require('../assets/img/eye-close.png')}/>
            :<Image style={ss.icon} source={require('../assets/img/eye-open.png')}/>
            }
          </Pressable>
      </View>
      {/* f3:提交按钮 */}
      <TouchableOpacity activeOpacity={0.6}
        onPress={doLogin}>
        <Text style={ss.btn}>登录</Text>
      </TouchableOpacity>
      {/* f4:logo和标题 */}
      <View style={ss.f4}>
        <Image style={ss.img} source={require('../assets/img/logo.png')}/>
        <Text style={ss.title}>后台管理系统</Text>
      </View>
      {/* f5:版权声明 */}
        <Text style={{textAlign:'center'}}>版权所有</Text>


    </View>
  )
}